<!-- <template>
	<HomeHeader></HomeHeader>
	<HomeSwiper></HomeSwiper>
	<HomeMenu></HomeMenu>
	<HomeHotCommodities></HomeHotCommodities>
<nut-backtop></nut-backtop>
	<h1>This is home</h1>
</template>

<script setup>
	import HomeHeader from "./components/HomeHeader.vue";
	import HomeSwiper from "./components/HomeSwiper.vue";
	import HomeMenu from "./components/HomeMenu.vue";
	import HomeHotCommodities from "./components/HomeHotCommodities.vue";


	// 声明emits
	const $emits = defineEmits(['change'])
	const changeGuidActive = () => {
		console.log("change", 0)
		$emits("change", 0)
	}
</script>

<style>
</style> -->

<template>
  <div class="home">
    <!-- 标题 -->
    <div class="title">文字书评网</div>

    <!-- 个人中心 -->
	<div class="profile" @click="goToProfile">
	  <span>个人中心</span>
	</div>

    <!-- 搜索栏 -->
    <div class="search">
      <input type="text" v-model="keyword" placeholder="请输入作者或书名" />
      <button @click="search">搜索</button>
    </div>

    <!-- 分类 -->
    <div class="categories">
      <div class="category-item" v-for="category in categories" :key="category.id" @click="goToCategory(category)">
        {{ category.name }}
      </div>
    </div>

    <!-- 书籍介绍 -->
    <div class="books">
      <div class="book" v-for="(book, index) in books" :key="book.id">
        <div class="book-box">
          <img :src="book.cover" alt="book cover" />
          <div class="book-info">
            <h3>{{ book.title }}</h3>
            <p>作者：{{ book.author }}</p>
            <p>书籍介绍：{{ book.description }}</p>
            <button @click="goToComment(book)">查看评论</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      categories: [
        { id: 1, name: '小说类' },
        { id: 2, name: '历史类' },
        { id: 3, name: '传记类' },
        // { id: 4, name: '心理学类' }
      ],
      books: [
        {
          id: 1,
          title: '平凡的世界',
          author: '路遥',
          description: '以孙少安和孙少平两兄弟为中心，讲述少年的成长，以及经受生活中的苦难，最终过着平凡却知足的日子 。全景式表现了改革时代中国城乡的社会生活和人们思想情感的巨大变迁',
          cover: 'https://img2.doubanio.com/view/subject/l/public/s1144911.jpg',
          category_id: 1
        },
        {
          id: 2,
          title: '王安石变法细节',
          author: '刘羽权',
          description: '安石变法研究之于宋史，如果藩镇研究之于唐史，是宋史中难点。想要理个清楚，不仅仅要有深厚的史学功底、还要有宏大的视野、精细的剖析。而本书就是试图用最简单的方式来解决这个问题',
          cover: 'https://img14.360buyimg.com/n0/jfs/t1/78188/24/20474/118371/62dd6027Ef1d4d2f8/78b5ae607efbd31e.jpg',
          category_id: 2
        },
        {
          id: 3,
          title: '邓小平时代',
          author: '傅高义',
          description: '美国哈佛大学傅高义教授倾十年心力完成的权威巨著《邓小平时代》，是对邓小平跌宕起伏的一生以及中国惊险崎岖的改革开放之路的全景式描述',
          cover: 'https://img10.360buyimg.com/n1/s200x200_jfs/t1/113694/24/18062/101095/5f657064E5c156e95/16aa48415fa341d0.jpg',
          category_id: 3
        }
      ]
    };
  },
  methods: {
    search() {
      // 搜索逻辑
	   if (this.keyword !== '') {
	        this.$router.push(`/search/${this.keyword}/result`); // 假设跳转链接为 '/search/:keyword'
	      }
    },
    goToProfile() {
      // 跳转到个人中心页面的逻辑
	  this.$router.push('/user'); 
    },
    goToCategory(category) {
      // 跳转到对应分类的书籍列表页面的逻辑
      // 假设跳转链接为 '/category/:categoryId'
      this.$router.push(`/category/${category.id}/books`);
    },
    goToComment(book) {
		this.$router.push(`/book/${book.id}/comments`);
      // 跳转到书籍评论页面的逻辑
    }

  }
};
</script>

<style>
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
}

.profile {
  margin-top: 20px;
  text-align: center;
}

.search {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search input {
  width: 200px;
  height: 30px;
  margin-right: 10px;
  padding: 0 10px;
}

.search button {
  padding: 4px 10px;
}

.categories {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.category-item {
  margin: 0 10px;
  padding: 4px 10px;
  background-color: #ddd;
  border-radius: 4px;
}

.books {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.book {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}

.book img {
  width: 100px;
  height: 150px;
  margin-bottom: 10px;
}

.book-info {
  text-align: center;
}

button {
  margin-top: 10px;
}
.book-box {
  display: flex;
  align-items: center;
}

.book-info {
  margin-left: 20px;
}
</style>